<template>
  <div class="search">
    <van-row v-if="isSearchFocused || searchValue" class="pt-4 pl-1 pr-1 bg-white" justify="center">
      <van-col :span="(item.value === 'mobile') ? 6 : 4" class="flex items-center justify-center" v-for="(item) in searchTypes" :key="item.value">
        <van-tag @click="switchSearchType(item.value)" class="h-7 w-3/4 text-xs flex items-center justify-center"
                 round
                 :color="(selectType === item.value) ? '#eff2fd' : '#f2f3f5'"
                 :text-color="(selectType === item.value) ? '#4187f2' : '#9a9c9d'">
          {{item.name}}
        </van-tag>
      </van-col>
    </van-row>
    <van-search v-model="searchValue" ref="searchInput" placeholder="请输入搜索关键词" @focus="searchFocus" @blur="searchBlur"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const emit = defineEmits(['updateParentSearchQuery']);

type SelectType = "mobile" | "name" | "company" | "position" | "email" | "address";
interface SearchType {
  name: string;
  value: SelectType;
}
//1.search框
const searchTypes: SearchType[] = [
  { name: "手机号", value: "mobile" },
  { name: "姓名", value: "name" },
  { name: "邮箱", value: "email" },
  { name: "公司", value: "company" },
  // { name: "部门", value: "department" },
  { name: "职位", value: "position" },
];
const selectType = ref<SelectType>("mobile");
const isSearchFocused = ref(false);
const searchValue = ref<string>('');
const searchFocus = ()=>{
  isSearchFocused.value = true
}
const searchBlur = ()=>{
  emit('updateParentSearchQuery',selectType.value, searchValue.value);
}

const searchInput = ref<HTMLElement>();
const switchSearchType = (type:SelectType) => {
  selectType.value = type
  if (searchInput.value) {
    searchInput.value.focus();
  }
}


</script>

<style scoped>

</style>
